<script>
import axios from 'axios';
import * as echarts from 'echarts';

    export default{
        data(){
            return{
                influence:["电梯","产权性质","装修程度","楼层","地区","房屋面积"],
                chart:null,
                url:"http://39.106.84.74:8060/yx",
            }
        },
        mounted(){
            console.log("mount")
            if (echarts.getInstanceByDom(document.getElementById("chart")) == undefined){
                this.chart = echarts.init(document.getElementById("chart"));
            }
            this.flushCharts()
        },
        created() {
            this.$watch(() => this.$route.params.influence,(newInfluence, oldInfluence) => {
                console.log("watch"+newInfluence)
                if (echarts.getInstanceByDom(document.getElementById("chart")) == undefined){
                    this.chart = echarts.init(document.getElementById("chart"));
                }else{
                    this.chart.clear()
                }
                this.flushCharts()
            })
        },
        methods:{
            getChart(url,params,chart){
                axios.get(url,{params:params})
                .then( (response) => {
                    chart.setOption(response.data)
                })
            },
            flushCharts(){
                console.log("flush")
                var city = this.$route.params.city
                var idx = this.$route.params.influence
                var influence = this.influence[idx]
                this.getChart(this.url,{"city":city,"influence":influence},this.chart)
            }
        }
    }
</script>

<template>
    <h1>{{ this.$route.params.city }} -> {{ this.influence[this.$route.params.influence] }}</h1>
    <keep-alive>
        <div class="container1">
            <div id="chart"  style="width: 80%;height: 100%;"></div>
        </div>
    </keep-alive>
</template>
<style>
    .container1{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
</style>